<!-- templates/video_details.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ video.topic if hasattr(video, 'topic') else '花艺教学视频' }} - 花艺AI测试应用</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <style>
        body { padding-top: 2rem; }
        .header { margin-bottom: 2rem; }
        .details-container { max-width: 1000px; margin: 0 auto; }
        .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 10px; margin-bottom: 20px; }
        .video-container iframe, .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; }
        .stats-badge { background-color: #f8f9fa; border-radius: 20px; padding: 5px 15px; margin-right: 10px; font-size: 0.9rem; display: inline-block; margin-bottom: 10px; }
        .stats-badge i { margin-right: 5px; }
        .timestamp { font-weight: bold; color: #6f42c1; }
        .character-img { width: 100%; border-radius: 10px; }
        .script-container { max-height: 400px; overflow-y: auto; }
        .controls-bar { background-color: #f8f9fa; padding: 15px; border-radius: 10px; margin-bottom: 20px; }
        .share-btn { margin-right: 10px; }
        .meta-info { font-size: 0.9rem; color: #6c757d; }
        .sections-tabs .nav-link { color: #495057; }
        .sections-tabs .nav-link.active { color: #6f42c1; border-color: #6f42c1; }
        .related-container { margin-top: 40px; }
        .related-video { position: relative; border-radius: 8px; overflow: hidden; margin-bottom: 15px; }
        .related-video img { width: 100%; height: 120px; object-fit: cover; }
        .related-title { font-size: 0.9rem; margin-top: 8px; }
        .related-duration { position: absolute; bottom: 10px; right: 10px; background-color: rgba(0,0,0,0.7); color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header text-center">
            <h1>花艺AI测试应用</h1>
            <p class="lead">视频详情</p>
            <nav class="nav justify-content-center">
                <a class="nav-link" href="/">首页</a>
                <a class="nav-link" href="/upload">上传知识</a>
                <a class="nav-link" href="/image">生成图像</a>
                <a class="nav-link" href="/speech">语音交互</a>
                <a class="nav-link" href="/video/list">视频库</a>
                <a class="nav-link" href="/status">系统状态</a>
            </nav>
        </div>

        <div class="details-container">
            <div class="mb-3">
                <h2>{{ video.topic if hasattr(video, 'topic') else '花艺教学视频' }}</h2>
                <div class="meta-info mb-2">
                    <span class="stats-badge">
                        <i class="bi bi-clock"></i> {{ video.duration | round(1) }}秒
                    </span>
                    <span class="stats-badge">
                        <i class="bi bi-calendar3"></i> {{ video.created_at.split(' ')[0] if hasattr(video, 'created_at') else '' }}
                    </span>
                    <span class="stats-badge">
                        <i class="bi bi-film"></i> {{ video.resolution if hasattr(video, 'resolution') else '720p' }}
                    </span>
                </div>
            </div>
            
            <!-- 视频播放器 -->
            <div class="video-container mb-4">
                <video controls autoplay poster="{{ video.thumbnail_url }}" preload="auto">
                    <source src="{{ video.video_url }}" type="video/mp4">
                    您的浏览器不支持HTML5视频
                </video>
            </div>
            
            <!-- 控制栏 -->
            <div class="controls-bar mb-4">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <button class="btn btn-primary me-2" id="play-btn">
                            <i class="bi bi-play-fill"></i> 播放
                        </button>
                        <button class="btn btn-outline-secondary me-2" id="pause-btn">
                            <i class="bi bi-pause-fill"></i> 暂停
                        </button>
                        <button class="btn btn-outline-secondary" id="replay-btn">
                            <i class="bi bi-arrow-counterclockwise"></i> 重播
                        </button>
                    </div>
                    <div>
                        <button class="btn btn-outline-primary share-btn" onclick="shareVideo()">
                            <i class="bi bi-share-fill"></i> 分享
                        </button>
                        <a href="{{ video.video_url }}" class="btn btn-outline-success" download>
                            <i class="bi bi-download"></i> 下载
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- 内容标签页 -->
            <div class="sections-tabs">
                <ul class="nav nav-tabs mb-3" id="detailsTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="script-tab" data-bs-toggle="tab" data-bs-target="#script" type="button" role="tab" aria-controls="script" aria-selected="true">教学脚本</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="character-tab" data-bs-toggle="tab" data-bs-target="#character" type="button" role="tab" aria-controls="character" aria-selected="false">虚拟花艺师</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="tech-tab" data-bs-toggle="tab" data-bs-target="#tech" type="button" role="tab" aria-controls="tech" aria-selected="false">技术详情</button>
                    </li>
                </ul>
                <div class="tab-content" id="detailsTabContent">
                    <!-- 脚本内容 -->
                    <div class="tab-pane fade show active" id="script" role="tabpanel" aria-labelledby="script-tab">
                        <div class="card">
                            <div class="card-header bg-light">
                                <h5 class="mb-0"><i class="bi bi-file-text"></i> 教学脚本内容</h5>
                            </div>
                            <div class="card-body script-container">
                                {% if script and script.segments %}
                                    {% for segment in script.segments %}
                                    <p>
                                        <span class="timestamp">[{{ segment.timestamp }}]</span> {{ segment.content }}
                                    </p>
                                    {% endfor %}
                                {% elif script and script.full_text %}
                                    <p>{{ script.full_text }}</p>
                                {% else %}
                                    <p class="text-muted">脚本内容不可用</p>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="card mt-3">
                            <div class="card-header bg-light">
                                <h5 class="mb-0"><i class="bi bi-info-circle"></i> 脚本信息</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <p><strong>主题:</strong> {{ script.topic if script and hasattr(script, 'topic') else '未知' }}</p>
                                        <p><strong>风格:</strong> {{ script.style if script and hasattr(script, 'style') else '未知' }}</p>
                                    </div>
                                    <div class="col-md-6">
                                        <p><strong>语言:</strong> {{ script.language if script and hasattr(script, 'language') else '普通话' }}</p>
                                        <p><strong>创建时间:</strong> {{ script.created_at if script and hasattr(script, 'created_at') else '未知' }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 角色信息 -->
                    <div class="tab-pane fade" id="character" role="tabpanel" aria-labelledby="character-tab">
                        <div class="row">
                            <div class="col-md-5">
                                <img src="{{ video.character_image_url if hasattr(video, 'character_image_url') else '/static/images/' + video.character_id + '.png' }}" 
                                     alt="虚拟花艺师" class="character-img mb-3">
                            </div>
                            <div class="col-md-7">
                                <div class="card h-100">
                                    <div class="card-header bg-light">
                                        <h5 class="mb-0"><i class="bi bi-person-badge"></i> 虚拟花艺师信息</h5>
                                    </div>
                                    <div class="card-body">
                                        <p><strong>角色风格:</strong> {{ video.character_style | capitalize if hasattr(video, 'character_style') else '未知' }}</p>
                                        <p><strong>角色类型:</strong> 专业花艺师</p>
                                        <p><strong>角色特点:</strong> AI生成的虚拟形象，配合口型动画技术，为您演示插花技巧。</p>
                                        <p><strong>创建方式:</strong> 使用StableDiffusion模型生成的高质量立绘，通过LivePortrait技术实现口型动画。</p>
                                        <p><strong>语音类型:</strong> VITS语音合成技术生成的自然语音。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 技术详情 -->
                    <div class="tab-pane fade" id="tech" role="tabpanel" aria-labelledby="tech-tab">
                        <div class="card">
                            <div class="card-header bg-light">
                                <h5 class="mb-0"><i class="bi bi-gear-fill"></i> 技术参数</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <h6>视频信息</h6>
                                        <ul>
                                            <li><strong>视频ID:</strong> {{ video.id }}</li>
                                            <li><strong>分辨率:</strong> {{ video.resolution if hasattr(video, 'resolution') else '720p' }}</li>
                                            <li><strong>尺寸:</strong> {{ video.width }}x{{ video.height if hasattr(video, 'height') else '720' }}</li>
                                            <li><strong>时长:</strong> {{ video.duration | round(1) }}秒</li>
                                            <li><strong>创建时间:</strong> {{ video.created_at if hasattr(video, 'created_at') else '' }}</li>
                                        </ul>
                                        
                                        <h6 class="mt-4">生成技术</h6>
                                        <ul>
                                            <li><strong>文案生成:</strong> DeepSeek-R1 + RAG专业知识库</li>
                                            <li><strong>角色生成:</strong> Stable Diffusion XL</li>
                                            <li><strong>语音合成:</strong> VITS技术</li>
                                            <li><strong>口型动画:</strong> LivePortrait技术</li>
                                        </ul>
                                    </div>
                                    <div class="col-md-6">
                                        <h6>视频组成</h6>
                                        <div class="progress mb-2" style="height: 20px;">
                                            <div class="progress-bar bg-primary" style="width: 25%">文案 (25%)</div>
                                            <div class="progress-bar bg-success" style="width: 20%">角色 (20%)</div>
                                            <div class="progress-bar bg-info" style="width: 25%">语音 (25%)</div>
                                            <div class="progress-bar bg-warning" style="width: 30%">动画 (30%)</div>
                                        </div>
                                        
                                        <h6 class="mt-4">文件信息</h6>
                                        <ul>
                                            <li><strong>视频文件:</strong> MP4 格式</li>
                                            <li><strong>音频轨道:</strong> AAC 编码</li>
                                            <li><strong>视频编码:</strong> H.264</li>
                                            <li><strong>缩略图:</strong> <a href="{{ video.thumbnail_url }}" target="_blank">查看</a></li>
                                        </ul>
                                        
                                        <h6 class="mt-4">关联数据</h6>
                                        <ul>
                                            <li><strong>脚本ID:</strong> {{ video.script_id }}</li>
                                            <li><strong>角色ID:</strong> {{ video.character_id }}</li>
                                            <li><strong>音频ID:</strong> {{ video.audio_id if hasattr(video, 'audio_id') else '未知' }}</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 相关视频 -->
            <div class="related-container">
                <h4 class="mb-3">相关视频</h4>
                <div class="row">
                    <div class="col-md-3 col-sm-6">
                        <a href="/video/create" class="text-decoration-none">
                            <div class="related-video">
                                <img src="/static/images/create_new.jpg" alt="创建新视频" onerror="this.src='https://via.placeholder.com/200x120?text=创建新视频'">
                                <div class="related-duration">新建</div>
                            </div>
                            <div class="related-title text-primary"><i class="bi bi-plus-circle"></i> 创建新的花艺教学视频</div>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="mt-4 mb-5">
                <a href="/video/list" class="btn btn-outline-primary">
                    <i class="bi bi-arrow-left"></i> 返回视频库
                </a>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 视频播放控制
            const videoElement = document.querySelector('video');
            const playBtn = document.getElementById('play-btn');
            const pauseBtn = document.getElementById('pause-btn');
            const replayBtn = document.getElementById('replay-btn');
            
            // 播放按钮
            playBtn.addEventListener('click', function() {
                videoElement.play();
            });
            
            // 暂停按钮
            pauseBtn.addEventListener('click', function() {
                videoElement.pause();
            });
            
            // 重播按钮
            replayBtn.addEventListener('click', function() {
                videoElement.currentTime = 0;
                videoElement.play();
            });
            
            // 脚本时间点跳转
            const timestamps = document.querySelectorAll('.timestamp');
            timestamps.forEach(timestamp => {
                timestamp.style.cursor = 'pointer';
                timestamp.addEventListener('click', function() {
                    // 提取时间点
                    const timeText = this.textContent.replace('[', '').replace(']', '');
                    
                    // 如果是"结束"，跳到视频末尾
                    if (timeText === '结束') {
                        videoElement.currentTime = videoElement.duration - 5;
                        videoElement.play();
                        return;
                    }
                    
                    // 解析时间点
                    const timeParts = timeText.split(':');
                    let seconds = 0;
                    
                    if (timeParts.length === 2) {
                        // MM:SS格式
                        seconds = parseInt(timeParts[0]) * 60 + parseInt(timeParts[1]);
                    } else if (timeParts.length === 3) {
                        // HH:MM:SS格式
                        seconds = parseInt(timeParts[0]) * 3600 + parseInt(timeParts[1]) * 60 + parseInt(timeParts[2]);
                    } else {
                        // 纯秒数
                        seconds = parseInt(timeParts[0]);
                    }
                    
                    // 跳转视频
                    videoElement.currentTime = seconds;
                    videoElement.play();
                });
            });
        });
        
        // 分享功能
        function shareVideo() {
            if (navigator.share) {
                navigator.share({
                    title: '{{ video.topic if hasattr(video, 'topic') else '花艺教学视频' }}',
                    text: '看看我用花艺AI生成的教学视频!',
                    url: window.location.href
                })
                .then(() => console.log('分享成功'))
                .catch((error) => console.log('分享失败', error));
            } else {
                // 复制URL到剪贴板
                const url = window.location.href;
                navigator.clipboard.writeText(url)
                    .then(() => alert('视频链接已复制到剪贴板'))
                    .catch(err => console.error('复制失败:', err));
            }
        }
    </script>
</body>
</html>
